<template>
  <div>
    <el-aside width="65px" style="background-color: #171c3a;height:100%;">
      <div>
        <div class="logo-container">
          <img class="logo-style" src="../assets/logo1.png" alt="Logo" />
        </div>
        <el-menu
          background-color="#171c3a"
          active-text-color="#0166ed"
          :default-active="this.$route.path"
          collapse
          router
        >
          <el-menu-item :class="[this.activeRoute.startsWith('/index')?'active':'']" index="/index">
            <i
              :class="[this.activeRoute.startsWith('/index')?'activeColor':'']"
              class="item-font-size iconfont"
            >&#xe7a7;</i>
            <span slot="title">首页</span>
          </el-menu-item>
          <el-menu-item
            :class="[this.activeRoute.startsWith('/session')?'active':'']"
            index="/session"
          >
            <i
              :class="[this.activeRoute.startsWith('/session')?'activeColor':'']"
              class="item-font-size iconfont"
            >&#xe7b3;</i>
            <span slot="title">会话</span>
          </el-menu-item>
          <el-menu-item
            :class="[this.activeRoute.startsWith('/visitor')?'active':'']"
            index="/visitor"
          >
            <i
              :class="[this.activeRoute.startsWith('/visitor')?'activeColor':'']"
              class="item-font-size iconfont"
            >&#xe74b;</i>
            <span slot="title">访客</span>
          </el-menu-item>
          <el-menu-item
            :class="[this.activeRoute.startsWith('/history')?'active':'']"
            index="/history"
          >
            <i
              :class="[this.activeRoute.startsWith('/history')?'activeColor':'']"
              class="item-font-size iconfont"
            >&#xe7c2;</i>
            <span slot="title">历史</span>
          </el-menu-item>
          <el-menu-item
            :class="[this.activeRoute.startsWith('/customer')?'active':'']"
            index="/customer"
          >
            <i
              :class="[this.activeRoute.startsWith('/customer')?'activeColor':'']"
              class="item-font-size iconfont"
            >&#xe7b2;</i>
            <span slot="title">客户</span>
          </el-menu-item>
          <el-menu-item :class="[this.activeRoute.startsWith('/order')?'active':'']" index="/order">
            <i
              :class="[this.activeRoute.startsWith('/order')?'activeColor':'']"
              class="item-font-size iconfont"
            >&#xe7c4;</i>
            <span slot="title">工单</span>
          </el-menu-item>
          <el-menu-item
            :class="[this.activeRoute.startsWith('/statistic')?'active':'']"
            index="/statistic"
          >
            <i
              :class="[this.activeRoute.startsWith('/statistic')?'activeColor':'']"
              class="item-font-size iconfont"
            >&#xe7b5;</i>
            <span slot="title">统计</span>
          </el-menu-item>
          <div class="div-border-style"></div>
          <el-menu-item
            :class="[this.activeRoute.startsWith('/setting')?'active':'']"
            index="/setting"
          >
            <i
              :class="[this.activeRoute.startsWith('/setting')?'activeColor':'']"
              class="item-font-size iconfont"
            >&#xe76c;</i>
            <span slot="title">设置</span>
          </el-menu-item>
          <el-menu-item @click="logout">
            <i class="item-font-size iconfont">&#xe75e;</i>
            <span slot="title">退出</span>
          </el-menu-item>
        </el-menu>
      </div>
    </el-aside>
  </div>
</template>

<script>
import api from "@/api/api";
export default {
  name: "Aside",
  components: {},
  props: {},
  data() {
    return {
      activeRoute: "/index"
    };
  },
  watch: {
    $route() {
      this.setRoute();
    }
  },
  computed: {},
  methods: {
    setRoute() {
      this.activeRoute = this.$route.path;
    },
    logout() {
      api.logoutAPI({}).then(res => {
        let { error, data } = res.data;
        if (error) {
          this.$message.error(data);
        } else {
          this.$message({
            message: "注销成功",
            type: "success"
          });
          this.$router.replace({ path: "/login" });
        }
      });
    }
  },
  created() {
    this.setRoute();
  },
  mounted() {}
};
</script>

<style scoped>
.logo-container {
  margin: 20px 10px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.logo-style {
  height: 50px;
  width: 50px;
  border-radius: 50%;
}
.active {
  background-color: #080c27 !important;
  color: #0166ed;
  border-left: 4px solid #006eff;
}
/* .el-menu-item:hover {
  background-color: #080c27 !important;
  border-left: 4px solid #006eff;
} */
.div-border-style {
  border-top: 2px solid #666666;
  width: 30px;
  margin: 20px auto;
}
.item-font-size {
  font-size: 25px;
  color: #f2f2f2;
}
.item-font-size:hover {
  color: #0166ed;
}
.activeColor {
  color: #0166ed;
}
</style>
